<template>
  <div>
    <v-nav :current="2" @changelang="changelang" :isEnShow="isEnShow" :isChShow="isChShow"></v-nav>
    <img src="@/components/guanyu.png" alt="" style="width: 100%;display: block">
    <h1>{{listData.post_title}}</h1>
    <div class="main">
      <!-- <img :src="listData.src" alt=""> -->
      <div v-html="listData.post_content" style="text-align: left" id="contenT"></div>
    </div>
    <v-footer></v-footer>
  </div>
</template>

<script>
import $ from 'zepto'
import vNav from '@/components/nav/nav'
import vFooter from '@/components/footer'
import {mapGetters} from 'vuex'
import { getInfoData } from '@/services/api.js'
import { getInfoDataEn } from '@/services/api_en.js'
export default {
  name: 'news',
  data () {
    return {
      id: null,
      listData: []
    }
  },
  computed: {
    ...mapGetters({
      'lang': 'lang'
    })
  },
  components: {
    vNav,
    vFooter
  },
  methods: {
    _getChList () {
      let params = {
        id: this.id
      }
      getInfoData(params).then((res) => {
        console.log(res)
        this.listData = res
      })
    },
    _getEnList () {
      let params = {
        id: this.id
      }
      getInfoDataEn(params).then((res) => {
        console.log(res)
        this.listData = res
      })
    },
    version () {
      if (this.lang === 1) {
        this._getChList()
        this.isEnShow = false
        this.isChShow = true
      }
      if (this.lang === 2) {
        this._getEnList()
        this.isEnShow = true
        this.isChShow = false
      }
    },
    changelang (res) {
      if (res === 1) {
        this._getChList()
      }
      if (res === 2) {
        this._getEnList()
      }
    }
  },
  created () {
    this.id = this.$route.params.id
    this.version()
  },
  updated () {
    $('#contenT').find('img').css({'width': '8.4rem!important', 'display': 'block', 'height': 'auto!important', 'margin': '8px auto'})
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
@import '../util/common.scss';
h1 {
  padding: 30rem/$font-size-base;
  font-size: 30rem/$font-size-base;
  letter-spacing: 1px;
  color: #333;
  font-weight: normal;
}
.main {
  padding: 0 30rem/$font-size-base;
  img {
    width: 8.2rem;
    height: 420rem/$font-size-base
  }
  div {
    font-size: 24rem/$font-size-base;
    color: #666;
    letter-spacing: 2px;
    text-indent: 20px;
    padding: 0rem/$font-size-base 5rem/$font-size-base;
    p {
      img {
        width: 8.2rem!important;
      }
    }
  }
}
</style>
